<!-- 报表管理 -->
<template>
  <div class="widgetReport" :style="styleObj">
    <!-- <el-card> -->
    <el-card class="head">
      <el-form ref="FtuForm" :model="formData" label-width="0px" size="mini">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item prop="id">
              <template slot-scope="scope">
                <el-select
                  style="width: 100%"
                  v-model="formData.id"
                  placeholder="请选择报表"
                  @change="reportSelect($event)"
                  disabled
                >
                  <el-option
                    v-for="(item, index) in ReportList"
                    :label="item.name"
                    :value="item.id"
                    :key="index"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <div style="display: flex" v-if="formItemDateShow">
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-date-picker
                    style="width: 100%"
                    v-model="selectedDate"
                    type="date"
                  ></el-date-picker>
                </el-col>
                <el-col :span="3">
                  <el-select v-model="startHour" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in optionsHour"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="3">
                  <el-select v-model="endHour" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in optionsHour"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option> </el-select
                  >时
                </el-col>
                <!-- <el-col :span="8"> -->
                <div style="float: left">
                  <el-button type="primary" size="mini" @click="previousDay"
                    >上一日</el-button
                  >
                  <el-button type="primary" size="mini" @click="nextDay"
                    >下一日</el-button
                  >
                  <el-button type="primary" size="mini" @click="queryDay"
                    >查询</el-button
                  >
                  <!-- <el-button
                    type="primary"
                    icon="el-icon-printer"
                    size="mini"
                    @click="printJson"
                    >打印</el-button
                  > -->
                  <el-button type="primary" size="mini" @click="exportButton"
                    >导出</el-button
                  >
                </div>
                <!-- </el-col> -->
              </el-row>
            </div>
            <div style="display: flex" v-if="formItemMonthShow">
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-date-picker
                    v-model="month"
                    type="month"
                    :picker-options="pickerOptions"
                    placeholder="选择月"
                    @change="cutMonth"
                  >
                  </el-date-picker>
                </el-col>
                <el-col :span="3">
                  <el-select v-model="startDay" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in optionsDay"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option> </el-select
                  >日-
                </el-col>
                <el-col :span="3">
                  <el-select v-model="endDay" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in optionsDay"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option> </el-select
                  >日
                </el-col>
                <div style="float: left">
                  <el-button type="primary" size="mini" @click="prevMonth"
                    >上一月</el-button
                  >
                  <el-button type="primary" size="mini" @click="nextMonth"
                    >下一月</el-button
                  >
                  <el-button type="primary" size="mini" @click="queryMonth"
                    >查询</el-button
                  >
                  <!-- <el-button
                    type="primary"
                    icon="el-icon-printer"
                    size="mini"
                    @click="printJson"
                    >打印</el-button
                  > -->
                  <el-button type="primary" size="mini" @click="exportButton"
                    >导出</el-button
                  >
                </div>
              </el-row>
            </div>
            <div style="display: flex" v-if="formItemWeekShow">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-date-picker
                    v-model="selectedWeek"
                    type="week"
                    :default-value="defaultWeek"
                    format="yyyy 第 WW 周"
                    placeholder="选择周"
                    clearable
                    @change="changeWeek"
                  >
                  </el-date-picker>
                </el-col>
                <div style="float: left">
                  <el-button type="primary" size="mini" @click="prevWeek"
                    >上一周</el-button
                  >
                  <el-button type="primary" size="mini" @click="nextWeek"
                    >下一周</el-button
                  >
                  <el-button type="primary" size="mini" @click="queryWeek"
                    >查询</el-button
                  >
                  <!-- <el-button
                    type="primary"
                    icon="el-icon-printer"
                    size="mini"
                    @click="printJson"
                    >打印</el-button
                  > -->
                  <el-button type="primary" size="mini" @click="exportButton"
                    >导出</el-button
                  >
                </div>
              </el-row>
            </div>
            <div style="display: flex" v-if="formItemYearShow">
              <el-row :gutter="10">
                <el-col :span="6">
                  <el-date-picker
                    v-model="year"
                    type="year"
                    format="yyyy"
                    placeholder="选择年"
                  >
                  </el-date-picker>
                </el-col>
                <el-col :span="3">
                  <el-select v-model="startYear" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in optionsYear"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="3">
                  <el-select v-model="endYear" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in optionsYear"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <div style="float: left">
                  <el-button type="primary" size="mini" @click="prevYear"
                    >上一年</el-button
                  >
                  <el-button type="primary" size="mini" @click="nextYear"
                    >下一年</el-button
                  >
                  <el-button type="primary" size="mini" @click="queryYear"
                    >查询</el-button
                  >
                  <!-- <el-button
                    type="primary"
                    icon="el-icon-printer"
                    size="mini"
                    @click="printJson"
                    >打印</el-button
                  > -->
                  <el-button type="primary" size="mini" @click="exportButton"
                    >导出</el-button
                  >
                </div>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-divider>
      {{ reportType }}
    </el-divider>
    <!-- <div id="box" style="display: none"> -->
    <el-table
      :key="Key"
      ref="PrintWidgetTable"
      id="myTable"
      v-loading="loadingShow"
      size="mini"
      border
      :data="body"
      :height="styleObj.tableHeightCopy"
      style="width: 100%; font-size: 12px; background-color: transparent"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column
        v-for="(item, index) in header"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :align="item.align"
        :fixed="index === 0"
        resizable
        :render-header="renderheader"
      >
      </el-table-column>
      <!-- <div slot="empty" style="color: black">
        <el-empty description="哎呀,你是不是忘记查询啦!"></el-empty>
      </div> -->
    </el-table>
    <!-- </div> -->

    <!-- <div style="margin-top: 10px" v-show="bodylength > 0">
      <b>共 {{ bodylength }} 条</b>
    </div> -->
  </div>
</template>

<script>
import moment from "moment";
import { exportExcel } from "../../../../../utils/exportExcelBlob/index";
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
import { resourceUsage } from "process";
export default {
  name: "widgetReport",
  components: {
    YgTable,
    YgFrom,
  },
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    //这里存放数据
    return {
      loadingShow: false, //加载表格数据
      ReportList: [],
      TableList: [],
      formData: {
        id: "",
        reqType: 2,
      },
      reportType: "",
      options: {},
      header: [],
      body: [],
      bodylength: 0,
      Key: 0,
      mySpecialId: "",
      formItemDateShow: true,
      formItemWeekShow: false,
      formItemMonthShow: false,
      formItemYearShow: false,
      //////////////////////
      selectedDate: new Date(),
      startHour: "00",
      endHour: new Date().getHours() + "",
      optionsHour: [
        {
          value: "00",
          label: "00",
        },
        {
          value: "01",
          label: "01",
        },
        {
          value: "02",
          label: "02",
        },
        {
          value: "03",
          label: "03",
        },
        {
          value: "04",
          label: "04",
        },
        {
          value: "05",
          label: "05",
        },
        {
          value: "06",
          label: "06",
        },
        {
          value: "07",
          label: "07",
        },
        {
          value: "08",
          label: "04",
        },
        {
          value: "08",
          label: "04",
        },
        {
          value: "09",
          label: "09",
        },
        {
          value: "10",
          label: "10",
        },
        {
          value: "11",
          label: "11",
        },
        {
          value: "12",
          label: "12",
        },
        {
          value: "13",
          label: "13",
        },
        {
          value: "14",
          label: "14",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "16",
          label: "16",
        },
        {
          value: "17",
          label: "17",
        },
        {
          value: "18",
          label: "18",
        },
        {
          value: "19",
          label: "19",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "21",
          label: "21",
        },
        {
          value: "22",
          label: "22",
        },
        {
          value: "23",
          label: "23",
        },
      ],

      //月
      month: "",
      optionsDay: [],
      startDay: 1,
      endDay: new Date().getDate(),
      pickerOptions: {
        shortcuts: [
          {
            text: "上一月",
            onClick: () => {
              this.prevMonth();
            },
          },
          {
            text: "下一月",
            onClick: () => {
              this.nextMonth();
            },
          },
        ],
      },

      //周
      selectedWeek: "",
      defaultWeek: "",

      //年
      year: new Date().getFullYear() + "",
      startYear: "01",
      endYear: String(new Date().getMonth() + 1).padStart(2, "0"),
      optionsYear: [
        {
          value: "01",
          label: "01",
        },
        {
          value: "02",
          label: "02",
        },
        {
          value: "03",
          label: "03",
        },
        {
          value: "04",
          label: "04",
        },
        {
          value: "05",
          label: "05",
        },
        {
          value: "06",
          label: "06",
        },
        {
          value: "07",
          label: "07",
        },
        {
          value: "08",
          label: "04",
        },
        {
          value: "08",
          label: "04",
        },
        {
          value: "09",
          label: "09",
        },
        {
          value: "10",
          label: "10",
        },
        {
          value: "11",
          label: "11",
        },
        {
          value: "12",
          label: "12",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    formattedStartOfWeek() {
      if (this.selectedWeek) {
        const startDate = moment(this.selectedWeek)
          .startOf("week")
          .add(1, "day")
          .format("YYYY-MM-DD HH:mm:ss");
        return startDate;
      }
      return "";
    },
    formattedEndOfWeek() {
      if (this.selectedWeek) {
        const endDate = moment(this.selectedWeek)
          .endOf("week")
          .add(1, "day")
          .format("YYYY-MM-DD HH:mm:ss");
        return endDate;
      }
      return "";
    },
    // changeMessage: function () {
    //   switch (this.reportType) {
    //     case 0:
    //       return "分钟报表";
    //     case 1:
    //       return "时报表";
    //     case 2:
    //       return "日报表";
    //     case 3:
    //       return "周报表";
    //     case 4:
    //       return "月报表";
    //     case 5:
    //       return "季报表";
    //     case 6:
    //       return "年报表";
    //     default:
    //       return "";
    //   }
    // },
    transStyle() {
      return this.objToOne(this.options);
    },
    styleObj() {
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        tableHeight: this.transStyle.height - 74 + "px",
        tableHeightCopy: this.transStyle.height - 74,
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        background: this.transStyle.background,
        opacity: this.transStyle.transparency / 100,
      };
    },
  },
  //监控data中的数据变化
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.initTableKey();
        this.setOptionsData();
      },
      deep: true,
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.options = this.value;
    this.setOptionsData();
    setMessageCallback(this.onMessage);
    publishMsg({
      webMsgType: 1017, //发送网关消息
      funCode: 0,
    });
    //赋值当前月
    this.currentMonth();
    this.optionsDay = this.getDaysInMonth(this.month);
    //赋值当前周
    this.currentWeek();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    initTableKey() {
      this.Key = 1000 + Math.trunc(Math.random() * 1000);
    },
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split(",")[0]),
        h("div", {}, column.label.split(",")[1]),
      ]);
    },
    setOptionsData() {
      const optionsData = this.value.data;
      // const optionsData = this.optionsData; // 数据类型 静态 or 动态
      if (optionsData.dataType == "dynamicData") {
        this.dataType = "dynamicData";
        if (optionsData.dynamicData.hasOwnProperty("chartProperties")) {
          if (
            optionsData.dynamicData.chartProperties.hasOwnProperty("dataId")
          ) {
            this.formData.id =
              window.sessionStorage.getItem("report") ||
              optionsData.dynamicData.chartProperties.dataId;
          }
        }
      } else {
      }

      if (
        this.$store.state.widgetReport.some(
          (obj) => obj.id === this.formData.id
        )
      ) {
        let data = this.$store.state.widgetReport.find(
          (item) => item["id"] === this.formData.id
        );
        if (data.hasOwnProperty("data") && data.hasOwnProperty("columns")) {
          this.header = data.columns;
          this.body = data.data;
          this.bodylength = data.data.length;
          this.reportType = data.name;
        }
        this.loadingShow = false;
      } else {
        let newMsg = {
          webMsgType: 1017,
          funCode: 6,
        };
        newMsg.data = {
          id: this.formData.id,
          reqType: 1,
          count: 30,
        };
        this.mySpecialId = publishMsg(newMsg);
        this.loadingShow = true;
      }
    },
    query() {
      let newMsg = {
        webMsgType: 1017,
        funCode: 6,
      };
      newMsg.data = this.formData;
      publishMsg(newMsg);
      this.loadingShow = true;
      window.sessionStorage.setItem("report", this.formData.id);
    },
    exportButton() {
      if (this.bodylength == 0) {
        this.$message.warning("请查询数据后再导出！");
      } else {
        exportExcel(
          document.getElementById("myTable"),
          `${this.reportType}.xlsx`
        );
      }
    },
    printJson() {
      this.$print(this.$refs.PrintWidgetTable);
      this.initTableKey();
    },
    reportSelect(val) {
      let resut = this.ReportList.find((e) => {
        return e.id === val;
      });
      if (resut != null) {
        switch (resut.reportType) {
          case 3:
            this.formItemWeekShow = true;
            this.formItemDateShow = false;
            this.formItemMonthShow = false;
            this.formItemYearShow = false;
            break;
          case 4:
            this.formItemWeekShow = false;
            this.formItemDateShow = false;
            this.formItemMonthShow = true;
            this.formItemYearShow = false;
            break;
          case 6:
            this.formItemWeekShow = false;
            this.formItemDateShow = false;
            this.formItemMonthShow = false;
            this.formItemYearShow = true;
            break;

          default:
            this.formItemDateShow = true;
            this.formItemMonthShow = false;
            this.formItemWeekShow = false;
            this.formItemYearShow = false;
            break;
        }
      }
    },
    changeWeek() {
      this.formData.beginTime = this.formattedStartOfWeek;
      this.formData.endTime = this.formattedEndOfWeek;
    },
    ///////////////////////////
    queryDay() {
      var Str = ":00:00";
      const startTime =
        this.formatDate(this.selectedDate) + " " + this.startHour + Str;
      const paddedHours = this.endHour.toString().padStart(2, "0");
      const endTime =
        this.formatDate(this.selectedDate) + " " + paddedHours + Str;
      let result = {
        ...this.formData,
        ...{ beginTime: startTime, endTime: endTime },
      };
      let newMsg = {
        webMsgType: 1017,
        funCode: 6,
      };
      newMsg.data = result;
      this.mySpecialId = publishMsg(newMsg);
      this.loadingShow = true;
      window.sessionStorage.setItem("report", this.formData.id);
    },
    queryMonth() {
      let month = new Date(this.month);
      var Str = " 00:00:00";
      const yearMonth = this.formatDate(month).substring(0, 7);
      const startDay = this.startDay.toString().padStart(2, "0");
      const endDay = this.endDay.toString().padStart(2, "0");
      const startTime = yearMonth + "-" + startDay + Str;
      const endTime = yearMonth + "-" + endDay + Str;
      let result = {
        ...this.formData,
        ...{
          beginTime: startTime,
          endTime: endTime,
        },
      };
      let newMsg = {
        webMsgType: 1017,
        funCode: 6,
      };
      newMsg.data = result;
      this.mySpecialId = publishMsg(newMsg);
      this.loadingShow = true;
      window.sessionStorage.setItem("report", this.formData.id);
    },
    queryWeek() {
      let result = {
        ...this.formData,
        ...{
          beginTime: this.formattedStartOfWeek,
          endTime: this.formattedEndOfWeek,
        },
      };
      let newMsg = {
        webMsgType: 1017,
        funCode: 6,
      };
      newMsg.data = result;
      this.mySpecialId = publishMsg(newMsg);
      this.loadingShow = true;
      window.sessionStorage.setItem("report", this.formData.id);
    },
    queryYear() {
      let month = new Date(this.year);
      const yearMonth = this.formatDate(month).substring(0, 5);
      let res = yearMonth + this.endYear;
      let endYear = this.getDaysInMonth(res);
      endYear = endYear[endYear.length - 1];
      var Str = "-01 00:00:00";
      var endStr = "-" + endYear + " 00:00:00";
      const startTime = yearMonth + this.startYear + Str;
      const endTime = yearMonth + this.endYear + endStr;
      let result = {
        ...this.formData,
        ...{
          beginTime: startTime,
          endTime: endTime,
        },
      };
      let newMsg = {
        webMsgType: 1017,
        funCode: 6,
      };
      newMsg.data = result;
      this.mySpecialId = publishMsg(newMsg);
      this.loadingShow = true;
      window.sessionStorage.setItem("report", this.formData.id);
    },
    previousDay() {
      const previousDate = new Date(this.selectedDate);
      previousDate.setDate(previousDate.getDate() - 1);
      this.selectedDate = previousDate;
      this.queryDay();
    },
    nextDay() {
      const nextDate = new Date(this.selectedDate);
      nextDate.setDate(nextDate.getDate() + 1);
      this.selectedDate = nextDate;
      this.queryDay();
    },
    prevMonth() {
      const prevMonth = new Date(this.month);
      prevMonth.setMonth(prevMonth.getMonth() - 1);
      this.month = prevMonth;
      this.cutMonth(this.month);
    },
    nextMonth() {
      const nextMonth = new Date(this.month);
      nextMonth.setMonth(nextMonth.getMonth() + 1);
      this.month = nextMonth;
      this.cutMonth(this.month);
    },
    //切换周
    prevWeek() {
      const selectedDate = new Date(this.selectedWeek);
      selectedDate.setDate(selectedDate.getDate() - 7);
      this.selectedWeek = selectedDate;
    },
    nextWeek() {
      const selectedDate = new Date(this.selectedWeek);
      selectedDate.setDate(selectedDate.getDate() + 7);
      this.selectedWeek = selectedDate;
    },
    //切换年
    prevYear() {
      this.year = (parseInt(this.year) - 1).toString();
    },
    nextYear() {
      this.year = (parseInt(this.year) + 1).toString();
    },

    //切换月
    cutMonth(val) {
      const yearMonth = this.formatDate(val).substring(0, 7);
      this.optionsDay = this.getDaysInMonth(yearMonth);
      this.endDay = this.optionsDay[this.optionsDay.length - 1];
    },
    //获取当前月份
    currentMonth() {
      const date = new Date();
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      this.month = `${year}-${month}`;
    },
    // 获取当前周数
    currentWeek() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const firstDayOfWeek = this.getFirstDayOfWeek(year, month, day);
      this.selectedWeek = firstDayOfWeek;
      this.defaultWeek = firstDayOfWeek;
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    //获取当前月有多少天
    getDaysInMonth(dateString) {
      const [year, month] = dateString.split("-");
      const date = new Date(year, month - 1, 1);
      const days = [];

      while (date.getMonth() === month - 1) {
        days.push(date.getDate());
        date.setDate(date.getDate() + 1);
      }
      return days;
    },
    //获取当前周的周数
    getFirstDayOfWeek(year, month, day) {
      const date = new Date(year, month - 1, day);
      const dayOfWeek = date.getDay();
      const diff = (dayOfWeek === 0 ? 7 : dayOfWeek) - 1;
      date.setDate(date.getDate() - diff);
      return date;
    },
    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1017:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.ReportList = [];
              msg.data.map((e) => {
                return this.ReportList.push({
                  name: e.name,
                  id: e.id,
                  reportType: e.reportType,
                });
              });
              this.reportSelect(this.formData.id);
              break;
            case 6:
              if (this.mySpecialId === msg.specialId) {
                if (msg.retCode != 0 || !msg.data) {
                  this.$message.error(msg.retMsg);
                } else {
                  if (this.formData.id === msg.data.id) {
                    if (
                      msg.hasOwnProperty("returnType") &&
                      msg.returnType == 1
                    ) {
                      if (msg.data.reportType == 0) {
                        for (var i = 1; i < msg.data.columns.length; i++) {
                          var dateTime = msg.data.columns[i].label;
                          // var time = dateTime.split(" ")[1].substring(0, 5);
                          // msg.data.columns[i].label = time;
                          var datePart = dateTime.split(" ")[0]; // 提取日期部分
                          var timePart = dateTime.split(" ")[1]; // 提取时间部分
                          var seconds = timePart.split(":")[2]; // 提取秒部分
                          msg.data.columns[i].label = seconds + "秒";
                        }
                      } else if (msg.data.reportType == 1) {
                        for (var i = 1; i < msg.data.columns.length; i++) {
                          // var dateTime = msg.data.columns[i].label;
                          // var monthDay = dateTime.split(" ")[0].substring(5);
                          // msg.data.columns[i].label = monthDay;
                          var dateTime = msg.data.columns[i].label;
                          var time = dateTime.split(" ")[1].substring(0, 5);
                          msg.data.columns[i].label = time + "分";
                        }
                      } else if (msg.data.reportType == 2) {
                        for (var i = 1; i < msg.data.columns.length; i++) {
                          var dateTime = msg.data.columns[i].label;
                          var hour = dateTime.split(" ")[1].substring(0, 5);
                          msg.data.columns[i].label = hour;
                        }
                      } else if (msg.data.reportType == 3) {
                        for (var i = 1; i < msg.data.columns.length; i++) {
                          var dateTime = msg.data.columns[i].label;
                          var week = dateTime.split("-")[2].split(" ")[0];
                          msg.data.columns[i].label = week + "日";
                        }
                      } else if (msg.data.reportType == 4) {
                        for (var i = 1; i < msg.data.columns.length; i++) {
                          var dateTime = msg.data.columns[i].label;
                          var day = dateTime.split("-")[2].split(" ")[0];
                          msg.data.columns[i].label = day + "日";
                        }
                      } else if (msg.data.reportType == 6) {
                        for (var i = 1; i < msg.data.columns.length; i++) {
                          var dateTime = msg.data.columns[i].label;
                          var month = dateTime.split("-")[1];
                          msg.data.columns[i].label = month;
                        }
                      }
                      this.header = msg.data.columns;
                      this.body = msg.data.data;
                      this.initTableKey();
                      this.reportType = msg.data.name;
                      this.$store.commit("addWidgetReportData", msg.data);
                      // this.bodylength = msg.data.data.length;
                    } else if (
                      msg.data.hasOwnProperty("data") &&
                      msg.data.hasOwnProperty("columns")
                    ) {
                      this.header = msg.data.columns;
                      this.body = msg.data.data;
                      this.bodylength = msg.data.data.length;
                      this.reportType = msg.data.name;
                      this.$store.commit("addWidgetReportData", msg.data);
                    }
                  }
                }
                this.loadingShow = false;
              }
              break;
            default:
              break;
          }
          break;
      }
    },
    // 按钮点击
    buttonClick(index, prop) {
      //console.log(index, prop);
      if (index == "resetButton") {
        this.$refs.publicForm.resetForm();
      }
    },
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
// ::v-deep table {
//   table-layout: auto !important;
// }
// ::v-deep #myTable table {
//   table-layout: fixed !important;
// }
::v-deep .el-table__fixed-right {
  height: 100% !important;
}
::v-deep
  .DataTable
  .el-table__header-wrapper
  .el-table__header
  .has-gutter
  .el-checkbox {
  display: none;
}
.widgetReport {
  @import "./css/index.scss";
  ::v-deep .el-card {
    border: none;
    background-color: #0188fb5c;
  }
  ::v-deep .el-form-item .el-form-item__label {
    color: #fff;
  }
  ::v-deep .el-select .el-input__inner {
    background-color: transparent;
    border: 1px solid #0099ff;
    color: #fff;
  }
  ::v-deep .el-input__inner {
    background-color: transparent;
    border: 1px solid #0099ff;
    color: #fff;
  }
  ::v-deep .el-date-editor.el-input {
    width: 100%;
  }
  ::v-deep .el-input__icon {
    line-height: 30px;
  }
  ::v-deep .el-select .el-input .el-select__caret {
    color: #fff;
  }
  // ::v-deep .el-select .el-select-dropdown {
  //   border: 1px solid red;
  //   background-color: transparent;
  // }
  ::v-deep .el-select .el-select-dropdown__item {
    color: #fff;
  }
  ::v-deep .el-select .el-select-dropdown__item:hover {
    background-color: transparent;
  }
}
::v-deep .el-table {
  color: #fff;
}
::v-deep .el-table thead {
  color: #0099ff;
  font-size: 14px;
  font-weight: 500;
}
::v-deep .el-table::before {
  height: 0px;
}
::v-deep .el-table tr {
  background-color: transparent;
}
::v-deep .el-table th.el-table__cell {
  background-color: transparent;
}
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #0a74ff96;
}
::v-deep .el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #0a74ff96;
}
::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  transition: none;
}
::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: #1356a1;
}

::v-deep .el-table__body tr.hover-row > td.el-table__cell {
  background-color: #1356a1; /* 设置鼠标浮上去的背景色 */
}
::v-deep .el-table__fixed,
.el-table__fixed-right {
  background-color: #1356a1;
}
::v-deep .el-table--border {
  border-right: none;
  border: 1px solid #0a74ff96;
}
::v-deep .el-table--border th.el-table__cell.gutter:last-of-type {
  border-bottom: 1px solid #216fe6;
  border-bottom-width: 1px;
}
::v-deep .el-table--border th.gutter:last-of-type {
  display: none !important;
  // width: 0px !important;
}
/**修改全局的滚动条*/
/**滚动条的宽度*/
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #1356a1;
  border-radius: 3px;
} // 修改表格(el-table)的滚动条
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #1356a1;
  border-radius: 0px;
}
::v-deep .el-table th.gutter {
  // display: none;
  width: 5px;
}

::v-deep .el-table colgroup col[name="gutter"] {
  // display: none;
  width: 5px;
}

::v-deep .el-table__body {
  width: 100% !important;
}
::v-deep .el-table__header {
  width: 100% !important;
}
::v-deep .el-table--border::after {
  background-color: #0a74ff96;
}
::v-deep .el-table__fixed::before {
  height: 0px !important;
  background-color: #0a74ff96;
}
::v-deep .el-empty__description p {
  color: #12fffe;
  font-weight: 500;
  font-size: 16px;
}
::v-deep .el-button--primary {
  color: #fff;
  background-color: #409eff00;
  border-color: #409eff;
}
::v-deep .el-divider {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #409eff00;
  .el-divider__text {
    background-color: #409eff6e;
    border-radius: 30px;
    color: #fff;
  }
}
</style>
